<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">申请人:</p>
			</el-col>
			<el-col :span="4">
				<el-input v-model="user" placeholder="填写申请人名称" size="small"> </el-input>
			</el-col>
			<el-col :span="1">
				<el-button type="primary" @click="resRoleQuery" size="small">查询</el-button>
			</el-col>
			<el-col :span="18" style="margin-left:-10px;text-align: right">
				<el-button type="primary" @click="bfCoupon" v-if="btnGroup.add" size="small">补发</el-button>
				<el-button type="primary" @click="msgEdit" v-if="btnGroup.add" size="small">详情</el-button>
				<el-button type="primary" @click="startResRole" v-if="btnGroup.accept" size="small">通过</el-button>
				<el-button type="primary" @click="stopResRole" v-if="btnGroup.refuse" size="small">拒绝</el-button>
			</el-col>

			<!--审批人那一行 框-->

		</el-row>
		<!--审批人那一行  框 结束-->
		<!--表格-->
		<!--
																																																													作者：吴彦昭
																																																													时间：2017-03-20 17:40
																																																													描述：表格整理
																																																												-->
		<el-table :data="tableData.dataList" border style="width: 100%;height:460px;" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="60" fixed>
			</el-table-column>
			<el-table-column prop="uName" label="申请人" width="100">
			</el-table-column>
			<el-table-column prop="applyDate" align="center" label="申请时间" :formatter="formatTime" width="200">
			</el-table-column>
			<el-table-column prop="remark" label="补发原因" width="450">
			</el-table-column>
			<el-table-column prop="num" label="优惠劵号" width="250">
			</el-table-column>

			<el-table-column prop="NAME" label="所属活动" width="200">
			</el-table-column>
			<el-table-column prop="gift" label="赠送礼品" width="200">
			</el-table-column>
			<el-table-column prop="plateNum" label="车牌号" width="150">
			</el-table-column>
			<el-table-column prop="contactName" label="车主姓名" width="150">
			</el-table-column>

			<el-table-column prop="contactPhone" align="right" label="车主电话" width="150">
			</el-table-column>

			<el-table-column prop="status" label="处理状态" :formatter="statusCov" width="150">
			</el-table-column>

		</el-table>

		<!--页面翻页 开始-->
		<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
		</el-pagination>
		<!--页面翻页 结束-->
		<!--表格 结束-->

		<!--优惠券 申请列表 结束-->

		<!--优惠券 申请补发  开始-->

		<!--第二列-->
		<el-dialog title="补发优惠券" v-model="addFormShow">
			<el-form label-width="140px" :model="formLabelAlign" ref="bfForm" :rules="bfRule">
				<!--车牌号 及其 输入框 -->
				<el-row>
					<el-col :span="20">
						<el-form-item label="车牌号" prop="">
							<el-input v-model="queryPalet" size="small">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-button type="primary" @click="BFQuery" size="small">查询</el-button>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="20">
						<el-form-item label="VIN" prop="vin">
							<el-input v-model="queryVin" size="small">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<!--活动优惠券 及其 输入框 -->
				<el-form-item label="活动优惠券" prop="num">
					<el-select v-model="formLabelAlign.num" placeholder="请选择活动优惠劵">
						<el-option v-for="item in options" :label="item.label" :value="item.value" size="small">
						</el-option>
					</el-select>
				</el-form-item>
				<!--禁选框 vin -->
				<el-form-item label="vin">
					<el-input v-model="formLabelAlign.vin" :disabled="true" size="small">
					</el-input>
				</el-form-item>
				<!--禁选框 电话号码 -->
				<el-form-item label="电话号码">
					<el-input v-model="formLabelAlign.concatPhone" :disabled="true" size="small">
					</el-input>
				</el-form-item>
				<!--页面 文本框-->
				<el-form-item label="补发原因" prop="remark">
					<el-input type="textarea" v-model="formLabelAlign.remark" :rows="3" placeholder="请输入补发原因" size="small"></el-input>
				</el-form-item>
				<!--页面下面的 补发 取消 按钮-->
				<el-form-item>
					<el-button type="primary" @click="save" size="small">提交</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!--第三列 空-->

		<!--查询 的弹出框 开始-->
		<el-dialog title="优惠劵补发详情" v-model="msgFormShow">
			<el-form :model="msgFormData" size="small" label-width="140px">
				<el-form-item label="所属套餐" :label-width="formLabelWidth">
					<el-input v-model="msgFormData.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="赠送礼品" :label-width="formLabelWidth">
					<el-input v-model="msgFormData.gift" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="礼品价值" :label-width="formLabelWidth">
					<el-input v-model="msgFormData.cost" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="车主姓名" :label-width="formLabelWidth">
					<el-input v-model="msgFormData.contactName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="车主电话" :label-width="formLabelWidth">
					<el-input v-model="msgFormData.contactPhone" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="车牌号" :label-width="formLabelWidth">
					<el-input v-model="msgFormData.plateNum" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="VIN" :label-width="formLabelWidth">
					<el-input v-model="msgFormData.vin" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="优惠劵号" :label-width="formLabelWidth">
					<el-input v-model="msgFormData.num" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="使用状态" :label-width="formLabelWidth">
					<el-input v-model="msgFormData.cStatus" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="使用时间" :label-width="formLabelWidth">
					<el-input v-model="msgFormData.useDate" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="有效期至" :label-width="formLabelWidth">
					<el-input v-model="msgFormData.youxiaoqi" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="工单号" :label-width="formLabelWidth">
					<el-input v-model="msgFormData.gongdanId" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="使用备注" :label-width="formLabelWidth">
					<el-input v-model="msgFormData.useRemark" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="发券人" :label-width="formLabelWidth">
					<el-input v-model="msgFormData.createCode" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="打印人" :label-width="formLabelWidth">
					<el-input v-model="msgFormData.dayinCode" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="打印时间" :label-width="formLabelWidth">
					<el-input v-model="msgFormData.dayinDate" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!--查询  的弹出框 结束-->
	</div>
</template>
<script>
//首页 切换页 申请列表 和 申请补发
//先写的 申请补发
export default {
	data: function () {
		return {
			queryVin:"",
			queryPalet:"",
			addFormShow: false,
			//查询条件
			user: '',
			id: '',
			num: '',
			//申请补发 界面
			activeName2: 'first',
			//申请列表
			formInline: {
				user: '',
				region: ''
			},
			//点击查询 显示
			msgFormData: {
				name: '',
				gift: '',
				cost: '',
				contactName: '',
				contactPhone: '',
				plateNum: '',
				vin: '',
				num: '',
				status: '',
				cStatus: '',
				useDate: '',
				youxiaoqi: '',
				gongdanId: '',
				useRemark: '',
				caozuoName: '',
				dayinName: '',
				dayinDate: ''
			},
			//点击查询 显示出表单
			msgFormShow: false,
			//页码数001
			CurentPage: 1,
			//每页的数量
			page: this.page,
			//分组数据
			tableData: {
				total: 0,
				dataList: []
			},

			//申请列表 下面的表格
			tableData: [{
				applyUid: '申请人',
				contactName: '王小虎',
				activityId: '五一假期活动ID',
				name: '所属套餐-赠送王小虎一只',
				applyDate: '创建时间2012',
				contactPhone: '车主电话121212',
				plateNum: '车牌号121212',
				num: '优惠券号码121212',
				status: '已完成',
				cz: '完成'
			}],
			//表单名称
			formLabelAlign: {
				plateNum: '',
				vin: '',
				contactPhone: '',
				type: '',
				num: '',
				remark: '', //补发原因，
			},
			emptyLabelAlign: {
				plateNum: '',
				vin: '',
				contactPhone: '',
				type: '',
				num: '',
				remark: '', //补发原因，
			},
			//活动优惠券 下拉菜单
			//点击 查询 按钮 弹出的详情页 开始
			dialogFormVisible: false,
			form: {
				name: '',
				region: '',
				date1: '',
				date2: '',
				delivery: false,
				type: [],
				resource: '',
				desc: ''
			},
			formLabelWidth: '120px',

			//详情页 结束

			options: [],
			value: '', //活动优惠券 下拉菜单 结束,
			// 当前 Button
			btnGroup: {},

			//表单规则
			bfRule: {
				/*vin: [{
					required: true,
					message: '请输入vin号',
					trigger: 'blur'
				}],*/
				name: [{
					required: true,
					message: '请输入车牌号',
					trigger: 'blur'
				}],
				num: [{
					required: true,
					message: '请选择活动优惠劵',
					trigger: 'change'
				}],

				remark: [{
					required: true,
					message: '请填写补发原因',
					trigger: 'blur'
				}],

			},
			multipleSelection: [],
		};

	},
	//方法 列表
	methods: {
		//选择框
		handleSelectionChange: function (val) {
			debugger;
			this.$data.multipleSelection = val;
			if (this.$data.multipleSelection.length > 1)
				this.$message.error("请选择一条数据！");
		},
		//状态转换
		statusCov: function (row, column) {
			//return row.status == "0" ? '已停用' : '已启用';
			switch (row.status) {
				case "0":
					return '未处理';
					break;
				case "1":
					return '已通过';
					break;
				case "2":
					return '已拒绝';
					break;
			}
		},
		//tabs 标签 固定组件  开始
		handleClick(tab, event) {
			console.log(tab, event);
		}, //tabs 标签 固定组件 结束
		//加载列表
		resRoleQuery: function () {
			//debugger;
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/crm/coupon/applyPage', //url
				params: { //发送的参数
					applyUid: this.$data.user, //查询条件
					start: this.$data.CurentPage, //页码
					limit: this.$data.page.pageSize, //每页的数量
					value: this.$data.value, //申请补发 优惠券 下拉 ?
				}
			}).then(function (resp) {
				debugger;
				resp.data.total = parseInt(resp.data.total);
				this.$data.tableData = resp.data;
			}, function (error) {
				// error
			})
		},
		//操作 界面内 查看 补发 拒绝 等按钮 开始
		//查看信息
		msgEdit: function () {
			console.log("触发 查看按钮");
			//修改可编辑属性
			if (this.$data.multipleSelection.length == 1) {

				var resRoleData = this.$data.multipleSelection[0];
				this.$http.get(this.API_ROOT + '/crm/coupon/applyInfo', {
					params: {
						id: resRoleData.id,
					}
				}).then((response) => {
					debugger;
					//判断语句
					var zhuangtai = response.data.data.cStatus;
					console.log(zhuangtai + "显示");
					if (zhuangtai == '0') {
						response.data.data.cStatus = "未打印";
					} else if (zhuangtai == 1) {
						response.data.data.cStatus = "已打印";
					} else if (zhuangtai == 2) {
						response.data.data.cStatus = "已使用";
					};;
					//判端 优惠劵是否使用 开始
					if (response.data.data.useDate == null || response.data.data.useDate == "") {
						response.data.data.useDate = "未使用";
					} else {
						response.data.data.useDate = this.moment(response.data.data.useDate).format("YYYY-DD-MM");
					}; //判端 优惠劵是否使用 开始 结束
					//‘dayinDate’  的 时间戳 转成时间格式
					response.data.data.dayinDate = this.moment(response.data.data.dayinDate).format("YYYY-DD-MM");
					//‘youxiaoqi’  的 时间戳 转成时间格式
					response.data.data.youxiaoqi = this.moment(response.data.data.youxiaoqi).format("YYYY-DD-MM");
					this.$data.msgFormData = response.data.data;
				}, (response) => {
					// error callback
				});
				this.$data.msgFormShow = true;
			} else {
				this.$message.error("请选择一条数据");
			}
		},
		//确定补发   返回主键ID
		startResRole: function () {
			console.log("触发 补发按钮");
			if (this.$data.multipleSelection.length == 1) {

				var resRoleData = this.$data.multipleSelection[0];

				this.$confirm('确认要通过这条申请吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					//debugger;
					this.$http({
						method: 'POST',
						url: this.API_ROOT + '/crm/coupon/applyYes',
						params: {
							id: resRoleData.id,
							num: resRoleData.num
						}
					}).then(function (resp) {
						this.$message(resp.data.msg);
						this.resRoleQuery();
					}, function (error) {
						this.$message.error(resp.data.msg);
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消此操作'
					});
				});
			} else {
				this.$message.error("请选择一条数据");
			}

		},
		//拒绝
		stopResRole: function () {
			if (this.$data.multipleSelection.length == 1) {

				var resRoleData = this.$data.multipleSelection[0];
				console.log("触发 拒绝按钮");
				this.$confirm('确认要拒绝这条申请吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					this.$http({
						method: 'POST',
						url: this.API_ROOT + '/crm/coupon/applyNo',
						params: {
							id: resRoleData.id,
							num: resRoleData.num
						}
					}).then(function (resp) {
						this.$message(resp.data.msg);
						this.resRoleQuery();
					}, function (error) {
						// error
						this.$message.error(resp.data.msg);
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消此操作'
					});
				});
			} else {
				this.$message.error("请选择一条数据");
			}

		},

		//操作 界面内 查看 补发 拒绝 等按钮 结束

		//日期转化
		//日期转换  applyDate
		formatTime: function (row, column) {
			if (row.applyDate == "" || row.applyDate == null) return "";
			return this.moment(Number(row.applyDate)).format("YYYY-MM-DD HH:mm:ss");
		},

		/*使用日期 转 标准时间
		formatTime1: function(row, column) {
			if(msgFormData.useDate == "" || msgFormData.useDate == null) return "";
			return moment(Number(msgFormData.useDate)).format("YYYY-MM-DD HH:mm:ss");
		},*/
		//点击 申请补发  tabs 标签
		//触发两个 动作
		//查询 下拉列表
		//查询 手机号
		//定义一个新的 函数方法

		BFQuery: function () {
			//debugger;
			//判断车牌号 是否为空
			/*if (this.$data.formLabelAlign.name == "") {
				this.$message("提示：车牌号为空，请输入。");
				return;
			} else if (this.$data.formLabelAlign.name != "") {
				console.log("没问题");
			}*/
			this.$data.formLabelAlign.num = "";
			
			this.$data.options = [];
			
			if(this.$data.queryPalet == "" && this.$data.queryVin == ""){
				this.$message.error("车牌号和VIN不能同时为空！");
				return;
			}
			
			//第一个查询  获取  下拉列表
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/crm/coupon/couponReissueCombo', //url为查询要补发的优惠券下拉
				params: { //发送的参数
					plateNum: this.$data.queryPalet, //查询条件 按照输入的车牌号
					vin:this.$data.queryVin,
				}
			}).then(function (resp) {
				debugger;
				this.$data.options = resp.data;
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/coupon/reissueInfo', //url 输出 按照车牌号的 车牌号
					params: { //发送的参数
						plateNum: this.$data.queryPalet, //查询条件 按照输入的车牌号
						vin:this.$data.queryVin,
					}
				}).then(function (resp) {
					//debugger;
					this.$data.formLabelAlign.vin = resp.data.data.vin; //提取VIN
					this.$data.formLabelAlign.concatPhone = resp.data.data.contactPhone; //提取 电话号码
				}, function (error) {
					// error
				})
			}, function (error) {
				// error
			});
			//debugger;
			//第二个查询  获取  车牌号

		},
		//列表，分页大小切换
		handleSizeChange: function () { },
		//列表,当前页切换
		handleCurrentChange: function (currentPage) {
			this.$data.CurentPage = currentPage;
			//this.$data.dictGroup = '';
			this.resRoleQuery();
		}, //分页传参 结束
		save: function () {

			this.$refs.bfForm.validate(function (valid) {
				if (valid) {

					//提交给后台 需要补发的车牌号等信息
					this.$http.post(this.API_ROOT + '/crm/coupon/couponReissueSave', this.$data.formLabelAlign, {

					})
						.then(resp => {
							if (resp.data.success) {
								this.$message(resp.data.msg);
								this.resRoleQuery(this.$data.curTreeDeptId);
								this.$data.addFormShow = false;

							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						});
				}
			}.bind(this));
		},
		//新增补发
		bfCoupon: function () {
			Object.assign(this.$data.formLabelAlign, this.$data.emptyLabelAlign)
			this.$data.queryPalet = "";
			this.$data.queryVin = "";
			this.$data.options = [];
			this.$data.addFormShow = true;
			
		}
	},

	created: function () { //位置 是 在 方法methods{}内部
		this.resRoleQuery(); //将要  调用的 函数名称
		this.$http({
			method: 'GET',
			url: this.API_ROOT + '/rbac/login/btn', //url 输出 按照车牌号的 车牌号
			params: { //发送的参数
				resPath: "crm/campaign/couponBuFa", ////查询条件 按照输入的车牌号
			}
		}).then(function (resp) {
			var btnData = resp.data.dataList;

			var temp = {};

			for (var i = 0; i < btnData.length; i++) {

				var btnName = btnData[i].btnName;

				temp[btnName] = btnName;

			}

			Object.assign(this.$data.btnGroup, temp);
		}, function (error) {
			// error
		})

	} //自动加载 组件创建时自动运行 结束
}
</script>